<template>
  <div class="filtersWrapper">
    <!-- 复选框 -->
    <el-checkbox-group v-model="checkList" class="filters">
      <el-checkbox v-for="value in depts" :key="value.id" :label="value.name" @change="filterchang" />
    </el-checkbox-group>

    <!-- 单选框 -->
    <el-checkbox-group v-model="checkendStatu" class="filters">
      <el-checkbox v-for="value in AttendanceEnum.holidayType" :key="value.id" :label="value.id" @change="filterchang">
        {{ value.value }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
// 引入部门列表
import { departments } from '../../../api/departments'
// 引入枚举
import AttendanceEnum from '../../../api/constant/attendance'
export default {
  props: {
    bigList: {
      // 表示传过来的格式
      type: Array,
      //   表示必传
      required: true
    }
  },
  data() {
    return {
      checkList: [], // 被选中的部门
      depts: [], // 部门列表
      AttendanceEnum, // 考勤状态枚举
      checkendStatu: [] // 被选中的考勤状态
    }
  },
  async created() {
    // 部门列表
    const { depts } = await departments()
    console.log(23, depts)
    this.depts = depts
  },
  methods: {
    filterchang() {
      let res
      //   判断  如果我们的  被选中的部门长度为0，那就，伪数据返回给他
      if (this.checkList.length === 0) {
        res = this.bigList
      } else {
        // 使用 filter()方法，对传过来的一百数据进行过滤
        res = this.bigList.filter(item => {
        //  item.departmentName  拿到每一个部门名称
          const department = item.departmentName
          // return返回结果  使用 includes()方法进行过滤，查看，返回所以满足条件的数据，把我们遍历的部门名称丢进去
          return this.checkList.includes(department)
        })
      }
      console.log(51, res)

      //   上面是部门过滤
      //   下面是工作状态过滤
      //   无论那个发生变化，两个贵过滤器其实都应该放在一起考虑
      //   使用 map()遍历每一个人
      res = res.map(user => {
        return {
          ...user,
          //   每个人都要对这个三十一天的记录进行处理
          attendanceRecord: this.convertRecord(user.attendanceRecord)
        }
      })
      this.$emit('filterchang', res)
    },
    // 接收上面旧的数据
    convertRecord(oldRecord) {
      // 这里是每个员工的考勤记录数组处理办法
      //   这里  oldRecord参数 有 31 天数据
      // 应该进行遍历，每天的数据如果状态码存在选中范围内，就显示，不然就空白
      const res = oldRecord.map(item => {
        //   选择框当中是否有选中
        const 选择框为空 = this.checkendStatu.length === 0
        const 数据在选择框中 = this.checkendStatu.includes(item.adtStatu.toString())
        return {
          ...item,
          //   拿到 31  天数据里面的 adtStatu ，给他判断一下，使用三元表达式，如果在被选中的考勤状态的数组里面找到了 item.adtStatu 的话，1就给他返回 item.adtStatu 找不到的话就放回 0
          // 如果/ 被选中的考勤状态没用任何值 || 如果当前记录值在选中数组中
          // 返回源数据
          //   否者返回 0
          adtStatu: 选择框为空 || 数据在选择框中 ? item.adtStatu : 0 // 选择框为空 或者 数据在选择框中 我就返回 item.adtStatu 否者返回 0
        }
      })

      return res
    }
  }
}
</script>

<style lang="scss" scoped>
.filtersWrapper {
    margin-bottom: 40px;
    .filtersb {
        margin: 10px 0;
    }
}
</style>
